<template>
  <div>
      <ul class="flex TabSwitchcard_box" :class="TabSwitchcard_box" :style="{'justify-content':propValue.btnAlign}">
            <li v-for="(item,i) of propValue.list" :key="i" :class="item.active?'TabSwitchcard_active':''" class="flex-center TabSwitchcard_btn" :style="getStyle(i)">
                {{item.BtnText}}
            </li>
      </ul>
       <div :class="TabSwitchcard_con"  :style="getItemStyle()">
            <div v-for="(item,i) of propValue.list"  :key="i" class="TabSwitchcard_item " :class="item.active?'':'hide'">
            <div>
            <div>
                <img :style="getimgStyle()" :src="item.img" alt="">
            </div>
             <div :style="{width:propValue.rightBoxwidth+'rem','margin-left':propValue.rightBoxmarginLeft+'rem','margin-top':propValue.rightBoxmarginTop+'rem'}">
                <div :style="getTtileStyle()">{{item.title}}</div>
                <div class="flex-wrap">
                    <div class="TabSwitchcard_btn_item flex-center" v-for="(ptem,p) of item.btnlist" :key="p" :style="getBtnitemStyle()">
                    {{ptem}}
                </div>
                </div>
               </div>
            </div>
            </div>
        </div>
  </div>
</template>

<script>

export default {
  props: {
    propValue: {
      type: Object,
      default: () => {},
    },
    element: {
      type: Object,
      default: () => {},
    },
 
  },
  data() {
    return {
        TabSwitchcard_con:'TabSwitchcard_con'+new Date().getTime(),
        TabSwitchcard_box:'TabSwitchcard_box'+new Date().getTime()
    };
  },
  mounted() {
    let TabSwitchcardList=JSON.parse(localStorage.getItem('TabSwitchcardList'))?JSON.parse(localStorage.getItem('TabSwitchcardList')):[]
    if(!TabSwitchcardList.length){
         let item={
                Tabclass:this.TabSwitchcard_box,
                class:this.TabSwitchcard_con,
                activeBg:this.propValue.btnActiveColor,
            }
          TabSwitchcardList.push(item)
          localStorage.setItem('TabSwitchcardList',JSON.stringify(TabSwitchcardList))
    }
    console.log(TabSwitchcardList)
   for(let item of TabSwitchcardList){
    this.TabSwitchcard_con=item.class
    this.TabSwitchcard_box=item.Tabclass
       this.tabchange(item)
   }
  },
  methods: {
    tabchange(item){
      $(function() {
            // 1.点击上部的li，当前li 添加current类，其余兄弟移除类
            $(`.${item.Tabclass} li`).click(function() {
                // 链式编程操作
                $(this).addClass("TabSwitchcard_active").siblings().removeClass("TabSwitchcard_active");
                // 2.点击的同时，得到当前li 的索引号
                var index = $(this).index();
               $(this).css({
                background:item.activeBg
               }).siblings().css({
                background:'#fff'
               })
               console.log( $(`${item.class}  .TabSwitchcard_item`))
                // 3.让下部里面相应索引号的item显示，其余的item隐藏
                $(`.${item.class} .TabSwitchcard_item`).eq(index).fadeTo(600,1).css({display:'block'}).siblings().fadeTo(400,0).css({display:'none'})
            });
        })
    },
    getimgStyle(){
         return {
           width:this.propValue.imgwidth+'rem', 
           height:this.propValue.imgheight+'rem', 
           'margin-right':this.propValue.imgright+'rem',
           'margin-left':this.propValue.imgleft+'rem',
           'margin-top':this.propValue.imgTop+'rem'
        }
    },
    getItemStyle(){
        return{
            'margin-top':this.propValue.itemTop+'rem'
        }
    },
    getTtileStyle(){
        return{
            color:this.propValue.titleColor,
            'font-size':this.propValue.titleSize+'rem',
            'margin-top':this.propValue.titleTop+'rem',
            'justify-content':this.propValue.titleAligin,
        }
    },
    getBtnitemStyle(){
         return{
           width:this.propValue.btnitemwidth+'rem',
           height:this.propValue.btnitemheight+'rem',
           'line-height':this.propValue.btnitemheight+'rem',
           'border-radius':this.propValue.btnitemradius+'rem',
           'font-size':this.propValue.btnitemSize+'rem',
            color:this.propValue.btnitemColor,
            'border':`1px solid ${this.propValue.btnborderColor}`,
           'margin-bottom':this.propValue.btnbottom+'rem',
           'margin-right':this.propValue.btnright+'rem',
           'margin-top':this.propValue.btntop+'rem',
           'margin-left':this.propValue.btnleft+'rem',
        }
    },
    getStyle(i){
        return {
           width:this.propValue.btnWidth+'rem', 
           height:this.propValue.btnHeight+'rem', 
           background:this.propValue.list[i].active?this.propValue.btnActiveColor:'#fff',
           'line-height':this.propValue.btnHeight+'rem',
           margin:this.propValue.BtnMargin+'rem',
          'border-radius':this.propValue.Btnradius+'rem'
        }
    },
  },
};
</script>
<style lang="scss" scoped>
.TabSwitchcard_btn{
 border:1px solid #03004D;
 text-align: center;
 cursor: pointer;
 
}
.TabSwitchcard_active{
    color: #fff;
}
.hide{
    display: none;
}
</style>